<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1100" destroy-on-close
             @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-main>
            <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" height="550">
                <el-table-column width="1"></el-table-column>
                <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                <el-table-column label="业务日期" prop="business_date" align="center"></el-table-column>
                <el-table-column label="单据编号" prop="purchase.code" align="center"></el-table-column>
                <el-table-column label="业务类型" prop="type" align="center">
                    <template #default="scope">
                        {{scope.row.type == 1?'采购入库':scope.row.type == 2?'采购退货':'其他'}}
                    </template>
                </el-table-column>
                <el-table-column label="期别" prop="money" align="center">
                    <template #default="scope">
                        <div v-for="item in stages_all" :key="item.stages_number">
                            {{scope.row.stages_number == item.stages_number?item.type:''}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="欠款总额" prop="money" align="center"></el-table-column>
                <el-table-column label="已付欠款" prop="pay_money" align="center"></el-table-column>
                <el-table-column label="应付欠款" prop="only_money" align="center"></el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
            </scTable>
        </el-main>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
    props:{
        query: { type: Object, default: () => ({}) },
    },
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增账户',
				edit: '欠款详情',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
            apiObj: this.$API.finance.payable.detail,
            selection: [],
            stages_all: [
                { stages_number: 0,type: '一次性',},
                { stages_number: 1,type: '首期金额',},
                { stages_number: 2,type: '二期金额',},
                { stages_number: 3,type: '三期金额',},
                { stages_number: 4,type: '四期金额',},
                { stages_number: 5,type: '五期金额',},
                { stages_number: 6,type: '六期金额',},
                { stages_number: 7,type: '七期金额',},
                { stages_number: 8,type: '八期金额',},
                { stages_number: 9,type: '九期金额',},
                { stages_number: 10,type: '十期金额',},
                { stages_number: 11,type: '十一期金额',},
                { stages_number: 12,type: '十二期金额',},
            ],
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        submit(){
            this.$emit('success',this.selection)
            this.visible = false
        },
        selectionChange(selection) {
			this.selection = selection;
		},
	}
}
</script>

<style></style>
